<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
	<head>
		<%@ include file="/WEB-INF/views/include.inc.jsp"%>
		<script type="text/javascript">
			$(document).ready(function() {
				//改变主题下拉框
				$("select[name='theme']").change(selectTheme)
				function selectTheme(){
					var selectText = $(this).find("option:selected").text(); 
					var selectValue = $(this).val();
					showimg(selectValue);
					$(".echarts").attr("echarts-theme",selectValue);
					$(".echarts").dblclick();
				}
				//显示主题图片
				function showimg(selectValue){
					$("#echarts-theme").attr("src","${contextPath}/styles/echarts/theme/"+selectValue+".png");
				}
				//传递表单参数
				$("#submitButton").click(function(){
					$("#demo-line").dblclick();
				});	
		    });
		</script>
	</head>
	<body>
<h1>1 图表主题切换<h1>
		<select name="theme">
			<option value="dark">dark</option>
			<option value="infographic">infographic</option>
			<option value="macarons" selected>macarons</option>
			<option value="roma">roma</option>
			<option value="shine">shine</option>
			<option value="vintage">vintage</option>
		</select>
		<img id="echarts-theme"/>
<h1>2 图表参数传递<h1>
		<form>		
			<input name="dateString" value="2017-06-27"/>
			<input name="temperatureInteger" value="30"/>
			<select name="themeSelect">
				<option value="dark">dark</option>
				<option value="infographic">infographic</option>
				<option value="macarons" selected>macarons</option>
				<option value="roma">roma</option>
				<option value="shine">shine</option>
				<option value="vintage">vintage</option>
			</select>
			<input type="checkbox" name="themeCheckbox" value="dark" checked>dark
			<input type="checkbox" name="themeCheckbox" value="infographic" checked>infographic
			<input type="checkbox" name="themeCheckbox" value="macarons" checked>macarons
		</form>
		<button id="submitButton">测试传入参数</button>
<h1>3 基础图表：Line、Bar、Pie、Stack</h1>
		<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
		<div id="demo-line" style="float:left" class="echarts"
			echarts-type="line"
			echarts-title="未来一周气温变化"
			echarts-link="https://www.baidu.com/" 
			echarts-subtitle="折线图"
			echarts-sublink="https://www.baidu.com/"
			echarts-theme="macarons"
			echarts-toolbox="true"
			echarts-datazoom="true"
			echarts-markpoint="true"
			echarts-markline="true"
			echarts-x-axis-name="日期(星期)"
			echarts-y-axis-name="最高温度(°C),最低温度(°C)"
			echarts-url="${contextPath}/echarts/line"
		></div>
		<a id="demo-bar-onclick" href="${contextPath}/echarts/onclick" target="_jbox"
		jbox-width="1200"
		jobx-height="400"
		jbox-title="跳转dialog对话框-{seriesName}-{name}"></a>
		<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
		<div id="demo-bar" style="float:left" class="echarts"
			echarts-type="bar"
			echarts-title="未来一周气温变化" 
			echarts-subtitle="条形图"
			echarts-theme="macarons"
			echarts-toolbox="false"
			echarts-datazoom="false"
			echarts-stack="true"
			echarts-x-axis-name="日期(星期)"
			echarts-y-axis-name="温度(°C)" 
			echarts-url="${contextPath}/echarts/bar"
			echarts-onclick-id="demo-bar-onclick"
		></div>
		<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
		<div id="demo-bar-and-line" style="float:left" class="echarts"
			echarts-type="bar"
			echarts-title="未来一周气温变化"
			echarts-link="https://www.baidu.com/" 
			echarts-subtitle="折线图"
			echarts-sublink="https://www.baidu.com/"
			echarts-theme="macarons"
			echarts-toolbox="true"
			echarts-datazoom="true"
			echarts-x-axis-name="日期(星期)"
			echarts-y-axis-name="最高温度(°C),最低温度(°C)"
			echarts-url="${contextPath}/echarts/barAndLine"
		></div>
		<a id="demo-pie-onclick" href="${contextPath}/echarts/onclick"></a>
		<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
		<div id="demo-pie" style="float:left" class="echarts"
			echarts-type="pie"
			echarts-title="搜索引擎现状" 
			echarts-subtitle="饼状图"
			echarts-theme="macarons"
			echarts-url="${contextPath}/echarts/pie"
			echarts-onclick-id="demo-pie-onclick"
		></div>
		<div style="clear:both"></div>
<h1>4 常用图表:双数值、反柱状、玫瑰图、漏斗图、雷达图</h1>
		<div id="demo-double-num-line" style="float:left" class="echarts"
			echarts-type="line"
			echarts-title="风机出力曲线（风速与功率）" 
			echarts-subtitle="双数值"
			echarts-theme="macarons"
			echarts-toolbox="false"
			echarts-datazoom="false"
			echarts-split-number="30"
			echarts-min-interval="0.5"
			echarts-x-axis-name="风速(m/s)"
			echarts-y-axis-name="功率(kw)"
			echarts-url="${contextPath}/echarts/doubleNumLine"
		></div>
		<div id="demo-double-obj-line" style="float:left" class="echarts"
			echarts-type="line"
			echarts-title="风机出力曲线（风速与功率）" 
			echarts-subtitle="双数值"
			echarts-theme="macarons"
			echarts-toolbox="false"
			echarts-datazoom="false"
			echarts-x-axis-name="时间"
			echarts-y-axis-name="功率(kw)"
			echarts-url="${contextPath}/echarts/doubleObjLine"
		></div>
		<div id="demo-reverse-bar" style="float:left" class="echarts"
			echarts-type="bar"
			echarts-title="未来一周气温变化" 
			echarts-subtitle="反柱状"
			echarts-theme="macarons"
			echarts-toolbox="false"
			echarts-datazoom="false"
			echarts-stack="true"
			echarts-y-axis-name="日期(星期)"
			echarts-x-axis-name="温度(°C)"
			echarts-url="${contextPath}/echarts/reverseBar"
		></div>
		<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
		<div id="demo-rose" style="float:left" class="echarts"
			echarts-type="rose"
			echarts-title="搜索引擎现状" 
			echarts-subtitle="玫瑰图"
			echarts-theme="macarons"
			echarts-url="${contextPath}/echarts/pie"
		></div>
		<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
		<div id="demo-funnel" style="float:left" class="echarts"
			echarts-type="funnel"
			echarts-title="搜索引擎现状" 
			echarts-subtitle="漏斗图"
			echarts-theme="macarons"
			echarts-url="${contextPath}/echarts/pie"
		></div>
		<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
		<div id="demo-radar" style="float:left" class="echarts"
			echarts-type="radar"
			echarts-title="预算分配实际开销对比" 
			echarts-subtitle="雷达图"
			echarts-theme="macarons"
			echarts-toolbox="false"
			echarts-datazoom="false"
			echarts-url="${contextPath}/echarts/radar"
		></div>
		<div style="clear:both"></div>
<h1>5 散点图表:线性回归、指数回归、对数回归、多项式回归</h1>
		<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
		<div id="demo-linear" style="float:left" class="echarts"
			echarts-type="scatter"
			echarts-regression="linear"
			echarts-title="Linear Regression" 
			echarts-subtitle="线性回归"
			echarts-theme="macarons"
			echarts-toolbox="false"
			echarts-datazoom="false"
			echarts-url="${contextPath}/echarts/linear"
		></div>
		<div id="demo-exponential" style="float:left" class="echarts"
			echarts-type="scatter"
			echarts-regression="exponential"
			echarts-title="1981 - 1998 gross domestic product GDP (trillion yuan)" 
			echarts-subtitle="指数回归"
			echarts-theme="macarons"
			echarts-toolbox="false"
			echarts-datazoom="false"
			echarts-url="${contextPath}/echarts/exponential"
		></div>
		<div id="demo-logarithmic" style="float:left" class="echarts"
			echarts-type="scatter"
			echarts-regression="logarithmic"
			echarts-title="1990 and 2015 per capita life expectancy and GDP" 
			echarts-subtitle="对数回归"
			echarts-theme="macarons"
			echarts-toolbox="false"
			echarts-datazoom="false"
			echarts-url="${contextPath}/echarts/logarithmic"
		></div>
		<div id="demo-polynomial" style="float:left" class="echarts"
			echarts-type="scatter"
			echarts-regression="polynomial"
			echarts-degree="5"
			echarts-title="18 companies net profit and main business income (million)" 
			echarts-subtitle="多项式回归"
			echarts-theme="macarons"
			echarts-toolbox="false"
			echarts-datazoom="false"
			echarts-url="${contextPath}/echarts/polynomial"
		></div>
		<div style="clear:both"></div>
<h1>6 动态图表:动态折线、动态柱状、动态仪表、动态注水图</h1>
		<div id="demo-gauge" style="width:300px;float:left" class="echarts"
			echarts-type="gauge"
			echarts-title="业务指标" 
			echarts-subtitle="完成率"
			echarts-theme="macarons"
			echarts-measure-range="100"
			echarts-split-number="10"
			echarts-axis-label-show="true"
			echarts-x-axis-name="%"
			echarts-socket="${contextPath}/webSocket/gauge/data"
		></div>
		
		<div id="demo-liquidFill1" style="width:300px;height:360px;float:left" class="echarts"
			echarts-title="业务指标完成率"
			echarts-type="liquidFill"
			echarts-toolbox="true"
			echarts-socket="${contextPath}/webSocket/gauge/data"
		></div>
		<div id="demo-liquidFill2" style="width:300px;height:360px;float:left" class="echarts"
			echarts-title="业务指标完成率"
			echarts-type="liquidFill"
			echarts-toolbox="true"
			echarts-socket="${contextPath}/webSocket/gauge/data"
		></div>
		<div id="demo-liquidFill3" style="width:300px;height:360px;float:left" class="echarts"
			echarts-title="业务指标完成率"
			echarts-type="liquidFill"
			echarts-toolbox="true"
			echarts-socket="${contextPath}/webSocket/gauge/data"
		></div>
		<div id="demo-liquidFill4" style="width:300px;height:360px;float:left" class="echarts"
			echarts-title="业务指标完成率"
			echarts-type="liquidFill"
			echarts-toolbox="true"
			echarts-socket="${contextPath}/webSocket/gauge/data"
		></div>
		
		<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
		<div id="demo-dynamic-line" style="float:left" class="echarts"
			echarts-type="line"
			echarts-title="未来一周气温变化"
			echarts-link="https://www.baidu.com/" 
			echarts-subtitle="折线图"
			echarts-sublink="https://www.baidu.com/"
			echarts-theme="macarons"
			echarts-toolbox="true"
			echarts-datazoom="true"
			echarts-x-axis-name="日期(星期)"
			echarts-y-axis-name="最高温度(°C),最低温度(°C)"
			echarts-url="${contextPath}/echarts/line"
			echarts-socket="${contextPath}/webSocket/line/data?collector=line"
		></div>
		<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
		<div id="demo-dynamic-bar" style="float:left" class="echarts"
			echarts-type="bar"
			echarts-title="未来一周气温变化" 
			echarts-subtitle="条形图"
			echarts-theme="macarons"
			echarts-toolbox="true"
			echarts-datazoom="true"
			echarts-x-axis-name="日期(星期)"
			echarts-y-axis-name="温度(°C)" 
			echarts-url="${contextPath}/echarts/bar"
			echarts-socket="${contextPath}/webSocket/line/data?collector=bar"
		></div>
		<div style="clear:both"></div>
<h1>7 其他图表:地图图表、日历图</h1>
		<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
		<a id="demo-other-map-onclick" href="${contextPath}/echarts/onclick"></a>
		<div id="demo-other-map" style="width:800px;height:660px;float:left" class="echarts"
			echarts-type="map"
			echarts-title="iphone销量" 
			echarts-subtitle="地图图表"
			echarts-theme="macarons"
			echarts-url="${contextPath}/echarts/map"
			echarts-onclick-id="demo-other-map-onclick"
		></div>
		
		<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
		<a id="demo-other-calendar-onclick" href="${contextPath}/echarts/onclick"></a>
		<div id="demo-other-calendar" style="width:800px;height:660px;float:left" class="echarts"
			echarts-type="calendar"
			echarts-title="个人每日花费时间" 
			echarts-subtitle="日历图"
			echarts-theme="macarons"
			echarts-url="${contextPath}/echarts/calendar"
			echarts-onclick-id="demo-other-calendar-onclick"
		></div>
		<div style="clear:both"></div>
<h1>8 多维数据的支持以及丰富的视觉编码手段</h1>
		<a id="demo-multidata-scatter-onclick" href="${contextPath}/echarts/onclick"></a>
		<div id="demo-multidata-scatter" style="width:1500px;height:660px;float:left" class="echarts"
			echarts-type="multidata-scatter"
			echarts-title="设备全生命周期管理" 
			echarts-subtitle="多维数据散点图"
			echarts-theme="macarons"
			echarts-url="${contextPath}/echarts/scatterData"
			echarts-onclick-id="demo-multidata-scatter-onclick"
		></div>
		<a id="demo-multidata-heatmap-onclick" href="${contextPath}/echarts/onclick"></a>
		<div id="demo-multidata-heatmap" style="width:1500px;height:660px;float:left" class="echarts"
			echarts-type="multidata-heatmap"
			echarts-title="设备全生命周期管理" 
			echarts-subtitle="多维数据散点图"
			echarts-theme="macarons"
			echarts-url="${contextPath}/echarts/scatterData"
			echarts-onclick-id="demo-multidata-heatmap-onclick"
		></div>
	</body>
</html>